<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.io</title>
  <style>
    .pannel {
      width: 300px;
      height: 500px;
      border: 1px solid #ccc;
    }
    .pannel-header {
      width: 100%;
      height: 60px;
      background-color: #eee;
      position: relative;
    }
    .pannel-header-name{ 
      width: 200px;
      height:30px;
      position: absolute;
      left: 0;
      top: 0;
      color: blue;
      font-size: 22px;
    }
    .pannel-header-exit {
      width: 50px;
      height: 30px;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
    }
    .pannel-header-desc {
      width: 100%;
      height: 20px;
      position: absolute;
      left: 0;
      top: 30px;
      font-size: 16px;
      color: #666;
      padding-top: 5px;
    } 
    .pannel-nav-wrap {
      width: 100%;
      height: 30px;
      border: 1px solid red;
    }
    ul{
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    .pannel-nav-wrap li{
      float: left;
      width: 50%;
      height: 30px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      color: red;
    }
    .pannel-nav-friend , .pannel-nav-history {
      width: 100%;
      height: 360px;
      border: 1px solid red;
      display: none;
    }
    .pannel-nav-friend li, .pannel-nav-history li{
      width: 100%;
      height: 30px;
      line-height: 30px;
      color: green;
      box-sizing: border-box;
      padding-left: 10px;
      margin-top: 2px;
      background-color: #f9f9f9;
      cursor: pointer;
    }
    .pannel-nav-friend {
      display: block;
    }

    .socket {
      width: 602px;
      height: 522px;
      border: 1px solid #D9D9D9;
      margin:0 auto;
      position: absolute;
      right: 50px;
      top: 0;
      display: none;
    }
    .socket-header{
      width: 100%;
      height: 80px;
      position: relative;
      background-color: #f9f9f9;
    }
    .socket-header-info{
      width: 300px;
      height: 80px;
      position: absolute;
      left: 20px;
      top: 0;
    }
    .socket-header-info-pho {
      width: 60px;
      height: 60px;
      border-radius: 30px;
      border: 1px solid green;
      position: absolute;
      left: 0px;
      top: 10px;
      text-align: center;
      line-height: 60px;
    }
    .socket-header-info-name {
      width: 200px;
      height: 30px;
      border: 1px solid #eee;
      position: absolute;
      left: 70px;
      top: 20px;
      margin: 0;
      padding: 0;
      line-height: 30px;
    }

    .socket-header-info-state {
      width: 200px;
      height: 25px;
      position: absolute;
      left: 70px;
      top: 50px;
      margin: 0;
      padding: 0;
      line-height: 25px;
      color: green;
      font-size: 16x;
    }
    .socket-header-exit{
      width: 50px;
      height: 30px;
      border: 1px solid #eee;
      position: absolute;
      right: 0;
      top: 5px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
    }

    #content {
      width: 100%;
      height: 260px;
      background-color: #fff; 
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;  
      overflow: auto;
    }
    .content-oper {
      width: 100%;
      height: 160px;
    } 
    .content-oper-choose {
      width: 100%;
      height: 38px;
      border-top: 1px solid #eee;
      background-color: #fff;
    }
    .content-oper-choose li {
      float: left;
      width: 100px;
      height: 38px;
      box-sizing: border-box;
      text-align: center;
      line-height:38px;
      cursor: pointer;
    }
    .content-oper-input {
      width: 100%;
      height: 73px;
      background-color: #f9f9f9;
    }
    input{
      border: none;
      outline: none;
    }
    .content-oper-send {
      width: 100%;
      height: 46px;
      position: relative;
      background-color: #fff;
    }
    .content-oper-send-exit {
      width: 90px;
      height: 36px;
      background-color: #5FB878;
      color: #fff;
      text-align: center;
      line-height: 36px;
      border-radius: 3px;
      font-size: 16px;  
      position: absolute;
      right: 165px;
      top: 5px;   
      border: none;  
      cursor: pointer;
    }
    .content-oper-send-confirm {
      width: 134px;
      height: 36px;
      background-color: #5FB878;
      color: #fff;
      text-align: center;
      line-height: 36px;
      border-radius: 3px;
      font-size: 16px;
      position: absolute;
      right: 20px;
      top: 5px; 
      border: none;   
      cursor: pointer;
    }
    .closeme {
      border: 1px solid red;
    }

    .justinput {
      width: 100%;
      height: 50px;
      border: 1px solid red;
    }

    .justinput-val {
      width: 200px;
      height: 30px;
      border: 1px solid green;
    }
    .justinput-val2 {
      width: 200px;
      height: 30px;
      border: 1px solid green;
    }

  </style>
  <script src="./jquery-2.1.4.min.js"></script>
</head>
<body>

  <!-- 用户的操作界面 -->
  <div class="pannel"> 
    <!-- 用户名和退出 -->
    <div class="pannel-header">
      <div class="pannel-header-name">亘古newbean</div>
      <div class="pannel-header-exit">X</div>
      <div  class="pannel-header-desc">亘古newbean...</div>
    </div>
    <div class="pannel-nav">
      <ul class="pannel-nav-wrap">
        <li>好友</li>
        <li>聊天记录</li>
      </ul>
      <ul class="pannel-nav-friend">
        <li>1. 张三</li>
        <li>2. 李四</li>
        <li>3. 张三</li>
        <li>4. 李四</li>
      </ul>
      <ul class="pannel-nav-history">
        <li>1. 通信记录111</li>
        <li>2. 通信记录222</li>
        <li>3. 通信记录333</li>
        <li>4. 通信记录444</li>
      </ul>
    </div>
  </div>

  <!-- 交流沟通的界面 -->
  <div class="socket">
    <div class="socket-header">
      <div class="socket-header-info">
        <div class="socket-header-info-pho">头像</div>
        <p class="socket-header-info-name">我是大怪兽</p>
        <p class="socket-header-info-state">在线</p>
      </div>
      <div class="socket-header-exit">X</div>
    </div>
    <div id="content"></div>
    <div class="content-oper">
      <ul class="content-oper-choose">
        <li>表情</li>
        <li>图片</li>
        <li>文件</li>
      </ul>
      <input type="text" id="input" class="content-oper-input">
      <div class="content-oper-send">
          <button  type="button" onclick="" class="content-oper-send-exit"><span>关闭</span></button>
          <button  type="button" onclick="say()" class="content-oper-send-confirm"><span>发送消息</span></button>
      </div>
    </div>
  </div>
  <div>
    <!-- <p>登陆</p>
    <p>
      <input type="text" placeholder="输入用户id" style="border: 1px solid red;">
      <button @click="">立即登陆</button>
    </p> -->
  </div>
  <div class="closeme">关闭通信</div>
  <div class="openme">建立通信</div>
  <div class="justinput">
    <input type="text" class="justinput-val">
    <input type="text" class="justinput-val2">
  </div>
  <script src="./socket.io.js"></script>

  <script>
    
    // （1）建立连接的测试  后台暂时测试使用 express 框架
    var socket = io.connect('http://192.168.1.121:81');
    //  var socket = io.connect('http://localhost:81');
    let socketObj = '';
    
    // 监听 connect 前端连接成功之后获取socket.id 信息
    socket.on('connect',function(){
      console.log("前端获取socket.id", socket.id);
      socketObj = socket.id;
      // 连接成功之后，向后台发送需要在数据库记录的相关信息
      socket.emit('login', { 
        test1: 'test1',
        test2: 'test2',
        test3: 'test3',
      });
    });

    // （2）监听 message 会话
    socket.on('message', function (data) {
      let html = document.createElement('p')
      html.innerHTML = `系统消息：<span>${data.hello}</span>`
      document.getElementById('content').appendChild(html)
      console.log(data);
    });

    // （3）按钮点击事件的测试
    function say() {
      let t = document.getElementById('input').value;
      
      // 初始化toid 为空值
      let toid = '';
      
      // 当前用户id
      let myid = socketObj;

      // 获取toid的开始 ---------------------------------------
      
      // 第一步，获取 toUserId
      let toUserId = 399;

      // 第二步，获取通过 toUserId 从数据库中检索 toSocketId
      // if(toSocketId){ // 对方用户当前处于在线状态
      //   toid = 1234;
      // }else{ // 当前用户处于离线的状态
      //   toid= "";
      // }

      // 获取toid的结束 -------------------------------------------
      
      if (!t) return
      let html = document.createElement('p')
      html.innerHTML = `我我我：<span>${t}</span>`
      document.getElementById('content').appendChild(html);
      let tempUserId = $(".justinput-val").val();
      let tempToId = $(".justinput-val2").val();

      // socket.emit('say', { my: t});
      socket.emit('say', { 
        my: t, 
        myid: myid,  // 当前用户的 scoketid  
        userid: tempUserId,
        toid: tempToId   //  需要联系的用户的 userid
      });
      
    }


    // （4）监听 news 会话的测试
    socket.on('news', function (data) {
      let html = document.createElement('p');
      html.innerHTML = `小皮咖说：<span>“${data.hello}”</span>`
      document.getElementById('content').appendChild(html)
    });


    // （5）监听吃饭会话的测试 无用-暂时注释-可去除
    // socket.on('eating', function (data) {
    //   console.log(data);
    //   let html = document.createElement('p')
    //   html.innerHTML = `小皮咖说：${data.hello}`
    //   document.getElementById('content').appendChild(html)
    // });



    // 于客户端主动关闭当前的连接
    $(".closeme").on('click',function(){
      let obj = socket.close();
      if(!obj.connected && obj.disconnected){
        console.log("通讯关闭成功");
        console.log("消除数据库信息存储设置");
      }else{
        console.log("通讯关闭失败");
      }
    });

  </script>


  <script>

    // 点击好友的时候，显示对应的聊天界面窗口
    $('.pannel-nav-friend li').on('click',function(){
      $(".socket").css("display","block");
    });

    // 点击退出的时候，隐藏对应的聊天界面窗口
    $('.content-oper-send-exit').on('click',function(){
      $(".socket").css("display","none");
    });

  </script>
</body>
</html>